<template>
	<div class="lm-chatgpt-body" ref="chaGptBody">
		<!--开场白和猜你想问-->
		<chatgpt-recommend-box :isPreview="isPreview"></chatgpt-recommend-box>
		<template v-if="!isPreview">
			<!--问答模块-->
			<div v-for="(item, index) in gptMessageList" :key="index">
				<!--代理人发送的问题项-->
				<lm-adviser-item v-if="item.message_type === '3'" :item="item"></lm-adviser-item>
				<!--普通文本项-->
				<general-text-item v-else-if="item.message_type === '4' && (item.message_body_type === 'text' || !item.message_body_type)" :item="item"></general-text-item>
				<!--客户画像项-->
				<client-portrait-item v-else-if="item.message_type === '4' && item.message_body_type === 'portrait'" :item="item"></client-portrait-item>
				<!--待办创建-->
				<ordinary-task-create v-else-if="item.message_type === '4' && item.message_body_type === 'ordinaryTaskCreate'"></ordinary-task-create>
				<!--任务安排-->
				<ordinary-task-manage v-else-if="item.message_type === '4' && item.message_body_type === 'ordinaryTaskManage'"></ordinary-task-manage>
				<!--定时任务创建-->
				<scheduled-task-create v-else-if="item.message_type === '4' && item.message_body_type === 'scheduledTaskCreate'"></scheduled-task-create>
				<!--定时任务清单-->
				<scheduled-task-manage v-else-if="item.message_type === '4' && item.message_body_type === 'scheduledTaskManage'" :item="item"></scheduled-task-manage>
				<!--本次总结-->
				<summary-this v-else-if="item.message_type === '4' && item.message_body_type === 'summaryThis'"></summary-this>
				<!--历史总结-->
				<summary-history v-else-if="item.message_type === '4' && item.message_body_type === 'summaryHistory'"></summary-history>
				<!--名片-->
				<calling-card-item v-else-if="item.message_type === '4' && item.message_body_type === 'callingCard'"></calling-card-item>
				<!--建议书、保障检视等h5页面-->
				<page-card-item v-else-if="item.message_type === '4' && item.message_body_type === 'pageUrl'" :item="item"></page-card-item>
				<!--视频类型项-->
				<video-card-item v-else-if="item.message_type === '4' && item.message_body_type === 'videoCard'" :item="item"></video-card-item>
				<!--业绩查询-->
				<performance-query-item v-else-if="item.message_type === '4' && item.message_body_type === 'performance'" :item="item"></performance-query-item>
				<!--活动量管理-->
				<activity-volume-item v-else-if="item.message_type === '4' && item.message_body_type === 'activityVolume'" :item="item"></activity-volume-item>
				<!--产品比对-要素填写-->
				<product-comparison-config v-else-if="item.message_type === '4' && item.message_body_type === 'productComparison'" :item="item"></product-comparison-config>
				<!--产品比对-比对结果-->
				<product-comparison-result v-else-if="item.message_type === '4' && item.message_body_type === 'productComparisonResult'" :item="item"></product-comparison-result>
				<!--异常-->
				<exception-item v-else-if="item.message_type === '4' && item.message_body_type === 'exception'" :item="item"></exception-item>
				<!--等待中-->
				<waiting-item v-else-if="item.message_type === '4' && item.message_body_type === 'loading'" :item="item"></waiting-item>
			</div>
			<!-- <product-comparison-result :item="{}"></product-comparison-result> -->
		</template>
	</div>
</template>

<script>
import ChatgptRecommendBox from './components/chatgpt-recommend-box.vue'
import LmAdviserItem from './components/lm-adviser-item.vue'
import GeneralTextItem from './components/general-text-item.vue'
import ClientPortraitItem from './components/client-portrait-item.vue'
import OrdinaryTaskCreate from './components/ordinary-task-create.vue'
import OrdinaryTaskManage from './components/ordinary-task-manage.vue'
import ScheduledTaskCreate from './components/scheduled-task-create.vue'
import ScheduledTaskManage from './components/scheduled-task-manage.vue'
import SummaryThis from './components/summary-this.vue'
import SummaryHistory from './components/summary-history.vue'
import CallingCardItem from './components/calling-card-item.vue'
import PageCardItem from './components/page-card-item.vue'
import VideoCardItem from './components/video-card-item.vue'
import PerformanceQueryItem from './components/performance-query-item.vue'
import ActivityVolumeItem from './components/activity-volume-item.vue'
import productComparisonConfig from './components/product-comparison-config.vue'
import productComparisonResult from './components/product-comparison-result.vue'
import ExceptionItem from './components/exception-item.vue'
import WaitingItem from './components/waiting-item.vue'
import { mapState, mapMutations } from "vuex"
export default {
	name: 'LlmChatgptBody',
	props: {
		isPreview: {
			type: Boolean,
			default: false
		}
	},
	components: {
		ChatgptRecommendBox,
		LmAdviserItem,
		GeneralTextItem,
		ClientPortraitItem,
		OrdinaryTaskCreate,
		OrdinaryTaskManage,
		ScheduledTaskCreate,
		ScheduledTaskManage,
		SummaryThis,
		SummaryHistory,
		CallingCardItem,
		PageCardItem,
		VideoCardItem,
		PerformanceQueryItem,
		ActivityVolumeItem,
		productComparisonConfig,
		productComparisonResult,
		ExceptionItem,
		WaitingItem
	},
	data() {
		return {
			chaGptBody: null,
		}
	},
	computed: {
		...mapState('lm-chat', ['gptMessageList', 'scrollGptMessage']),
	},
	watch: {
		scrollGptMessage(val) {
			if (val) {
				this.scrollToBottom()
				this.setScrollGptMessage(false)
			}
		}
	},
	mounted() {
		this.chaGptBody = this.$refs.chaGptBody
	},
	activated() {
		this.scrollToBottom()
	},
	methods: {
		...mapMutations('lm-chat', ['setScrollGptMessage']),
		// 滚动到底部
		scrollToBottom() {
			this.chaGptBody.scroll({
				top: this.chaGptBody.scrollHeight,
				// behavior: 'smooth'
			})
		},
	}
}
</script>

<style lang="scss" scoped>
.lm-chatgpt-body{
	position: relative;
	z-index: 0;
	// margin-top: 16px;
	flex: 1;
	overflow: hidden auto;
	scroll-behavior: smooth;
	padding: 0 20px;
	/deep/ .lm-chatgpt-item{
		max-width: 498px;
    margin-bottom: 16px;
		.chatgpt-item-content{
			padding: 20px;
			margin-top: 12px;
			border-radius: 8px;
			background: #F7F7F7;
			color: #464646;
			.item-section-title{
				font-size: 14px;
				font-weight: bold;
				line-height: 1;
			}
		}
	}
}
</style>